<template>
  <!-- 滑动事件的顺利加载 、icfont的引用-->

  <div class="news-item">
    <!-- 头部 -->
    <van-nav-bar title="首页" :class="[msg?'van-nav-bar-color':'']">
      <van-icon
        class-prefix="iconfont icon-caidan_o"
        name="extra"
        slot="left"
        @click="homemsg=true"
      />
      <van-icon class-prefix="iconfont icon-lingdang" name="extra" slot="right" />
      <van-icon
        class-prefix="iconfont icon-yuandiancaidan"
        name="extra"
        slot="right"
        @click.stop="caidan=true"
      />
    </van-nav-bar>

    <transition name="home">
      <div class="home" v-show="homemsg" @click="homemsg=false">
        <div :class="['content',msg?'content-color':'']" @click.stop>
          <div  :class="['home-header',msg?'home-header-color':'']">
            <div class="loginmsg">
              <div class="image">
                <img src="../../images/headimg_03.jpg" alt />
              </div>
              <span>请登录</span>
            </div>
            <p >
              <van-icon class-prefix="iconfont icon-wujiaoxing" name="extra" slot="right" />
              <span>我的收藏</span>
              <van-icon class-prefix="iconfont icon-xiazai" name="extra" slot="left" />
              <span>离线下载</span>
            </p>
          </div>
          <p :class="[msg?'p-color':'']">
            <van-icon name="wap-home" slot="left" />首页
          </p>
        </div>
      </div>
    </transition>

    <transition name="cd">
      <div class="news-caidan" v-show="caidan" @click="caidan=false">
        <p @click="change">{{ msg?text:'夜间模式' }}</p>
        <p >设置选项</p>
      </div>
    </transition>

    <!-- 轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div @click="newslist(image.id)"></div>
        <h3>{{ image.title }}</h3>
        <img v-lazy="image.img" height="100%" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <div v-for="(item, i) in data" :key="i" class="main">
      <!-- <h3>{{ i==0?'今日热闻':(item.time |dateFormat('ll dddd')) }}</h3> -->
      <h3 v-if="i!=0">{{ item.time |dateFormat('ll dddd') }}</h3>
      <h3 v-if="i==0" :class="[msg?'h3-color':'']">今日热闻</h3>
      <div @touchstart="touchStart($event)">
        <van-row
          type="flex"
          justify="space-between"
          v-for="(item, i) in item.msg"
          :key="i"
          :class="[msg?'van-row-color':'']"
        >
          <div @click="newslist(item.id)">
            <van-col span="12" :class="[msg?'van-col--12-color':'']">{{ item.title }}</van-col>
            <van-col span="6">
              <img :src="item.img" alt />
            </van-col>
          </div>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      text: "日间模式",
      msg: false,
      caidan: false,
      homemsg: false,
      images: [],
      data: [],
      oldtime: "",
      beforetime: "",
      flag: false,
      // 可视区高
      winheight: $(window).height(),
      // 文档高
      docheight: $(document).height(),
      // 卷出去高
      winlscro: $(window).scrollTop()
    };
  },
  created() {
    this.getLunbotu();
    this.newsVue();
    this.getnewsmsg("latest");
  },
  methods: {
    change() {
      this.msg = !this.msg;
// this.caidan=false
      $("body").css({
        background: this.msg ? "#343633" : "#f3f3f1"
      });
      
      
    },
    getLunbotu() {
      this.$axios.get("api/api/4/news/latest").then(response => {
        response.data.top_stories.forEach((item, index) => {
          if (index == 1 || index == 3 || index == 4) {
            this.images.push({
              img: item.image,
              title: item.title,
              id: item.id
            });
          }
        });
      });
    },
    newsVue() {
      this.$router.push("news");
    },
    getnewsmsg(date) {
      this.$axios.get("api/api/4/news/" + date).then(response => {
        // console.log(response);

        this.beforetime = response.data.date;
        // lei id =
        let imgdate = response.data.stories;
        let arr = [];
        for (let key in imgdate) {
          let date = {
            img: imgdate[key].images[0],
            title: imgdate[key].title,
            id: imgdate[key].id
          };
          arr.push(date);
        }
        this.data.push({ time: this.beforetime, msg: arr });
        // console.log(this.data);
      });
    },
    touchStart(e) {
      // 文档高
      (this.docheight = $(document).height()),
        // 卷出去高
        (this.winlscro = $(window).scrollTop());
      // console.log('文档高'+this.docheight,'卷出去高'+this.winlscro,'可视区'+this.winheight);

      if (
        this.docheight <= this.winlscro + this.winheight + 1 &&
        this.oldtime != this.beforetime
      ) {
        this.oldtime = this.beforetime;
        this.getnewsmsg("before/" + this.beforetime);
      }
    },
    newslist(id) {
      this.$router.push("/detail/" + id);
    }
  }
};
</script>
<style lang="less" scoped>
.home-enter,
.home-leave-to {
  opacity: 0;
  transform: translateX(-45%);
}
.home-enter-active,
.home-leave-active {
  transition: all 0.6s ease;
}

.cd-enter,
.cd-leave-to {
  opacity: 0;
  transform-origin: top right;
  transform: scale(0, 0);
}
.cd-enter-active,
.cd-leave-active {
  transition: all 0.6s ease;
}

body {
  width: 100%;
  overflow: hidden;
  background-color: #f3f3f1;
}
// 123
.body-color {
  background-color: #343633;
}

.news-caidan {
  position: fixed;
  z-index: 1000;
  top: 0.05rem;
  right: 0.02rem;
  width: 50%;
  height: 2rem;
  background-color: #fffffd;
  font: 0.5rem/1rem "楷体";
  color: #1a1a18;
  border-radius: 0.05rem;
  p {
    font-size: 0.25rem;
    margin: 0;
    padding-left: 0.5rem;
  }
}

.home {
  position: fixed;
  height: 1rem;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 184%;
  height: 100%;
  z-index: 10;
  .content-color{
    background-color: #343434!important;
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background-color: #fefefe;
    .home-header-color{
      background-color: #252525!important;
    }
    .home-header {
      height: 1.97rem;
      background-color: #03a1eb;
      .loginmsg {
        position: relative;
        font: 0.25rem/1.5 "楷体";
        color: aliceblue;
        .image {
          position: relative;
          top: 0.2rem;
          left: 0.2rem;
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        span {
          position: absolute;
          top: 0.3rem;
          left: 1rem;
        }
      }
      p {
        position: absolute;
        margin: 0;
        top: 1.3rem;
        font: 0.22rem/1.5 "楷体";
        color: aliceblue;
        .iconfont {
          margin-left: 0.5rem;
          font-size: 0.3rem;
        }
      }
    }
    .p-color{
background-color: #2c2c2c!important;
    }
    & > p {
      position: relative;
      padding-left: 1rem;
      width: 100%;
      height: 0.9rem;
      background-color: #f2f0f3;
      font: 0.25rem/0.9rem "楷体";
      color: #03a1eb;
      .van-icon-wap-home {
        position: absolute;

        top: 0.22rem;
        left: 0.4rem;
        color: #03a1eb;
      }
    }
  }
}




.van-nav-bar__right .icon-lingdang {
  margin-top: 0.1rem;
}
.iconfont {
  font-family: "iconfont" !important;
  margin-left: 0.8rem;
  font-size: 0.5rem;
  color: aliceblue;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-caidan_o {
  margin-left: 0.3rem;
}
.news-item {
  .van-swipe {
    margin-top: 1rem;
    height: 4rem;
  }
  width: 100%;
  letter-spacing: 0.02rem;
  // 123
  .van-nav-bar-color {
    background-color: #222222 !important;
  }
  .van-nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
    height: 1rem;
    background-color: #00a2eb;
    .van-nav-bar__left,
    .van-nav-bar__right {
      bottom: 50%;
      transform: translateY(50%);
    }
    .van-nav-bar__title {
      height: 100%;
      margin: 0;
      padding-top: 0.2rem;
      margin-right: 1rem;
      color: aliceblue;
      font-weight: 500;
      font-size: 0.3rem;
      font-family: "楷体";
      padding-right: 1.2rem;
    }
    .van-icon-wap-na {
      margin-left: 0.3rem;
    }
    .van-icon-user-o {
      margin-right: 0.6rem;
    }
    .van-icon-setting {
      margin-right: 0.3rem;
    }
  }
  .van-icon {
    font-size: 0.4rem;
    color: aliceblue;
    top: 50%;
  }
  h3 {
    margin: 0.25rem 0 0.25rem 0.3rem;
    color: #646462;
    font: 0.2rem/1.5 "楷体";
  }
  .h3-color {
    color: #c4c6c3;
  }
  // 123
  .van-row-color {
    border-color: #404040!important;
    background-color: #404040 !important;
    box-shadow: 0.02rem 0.02rem 0.05rem #404040,
      -0.01rem -0.01rem 0.02rem #404040!important;
  }
  .van-row {
    padding: 0.2rem 0.3rem;
    margin: 0.15rem 0.1rem;
    border: 0.01rem solid #eee;
    border-radius: 0.1rem;
    background-color: #fffffd;
    box-shadow: 0.02rem 0.02rem 0.05rem #c2c2c0,
      -0.01rem -0.01rem 0.02rem #c2c2c0;
    height: 1.75rem;
    div {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;

      .van-col--12 {
        color: #1a1a18;
        width: 70%;
        font: 0.25rem/1.5 "楷体";
      }
      .van-col--12-color {
        color: #ffffff !important;
      }
      .van-col--6 {
        width: 30%;
      }
    }
  }

  .van-swipe-item {
    // height: 674px !important;

    div {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.5)
      );
    }

    h3 {
      position: absolute;
      padding: 0;
      margin: 0;
      z-index: 2;
      bottom: 0;
      width: 100%;
      height: 1.5rem;
      padding: 0 0.3rem;
      color: white;
      font: 0.3rem/0.5rem "楷体";
      letter-spacing: 0.02rem;
    }
  }
}
</style>